<template>
	<view class="container">
		<view class="head">
			<view class="bg">
				<image src="/static/img/userinfo-bg.png" mode="widthFix" />
			</view>
			<view class="content">
				<view class="userinfo">
					<image class="avatar" :src="userinfo.avatar" mode="widthFix" />
					<view class="nickname">{{ userinfo.nickname }}</view>
				</view>
				<image class="edit-icon" src="/static/img/edit.png" />
			</view>
		</view>
		<view class="menu p-50">
			<view class="menu-item my-30">
				<view class="label"><image class="icon" src="/static/img/dui.png" />我的课程</view>
				<view class="content">足球训练小结下</view>
			</view>
			<view class="menu-item my-40">
				<view class="label"><image class="icon" src="/static/img/dui.png" />申请毕业</view>
				<view class="btn">
					<uv-button text="在线申请" color="#99BAE3" shape="circle" size="small"></uv-button>
				</view>
			</view>
			<view class="menu-item my-40">
				<view class="label"><image class="icon" src="/static/img/dui.png" />证书查看</view>
				<view class="btn">
					<uv-button text="点击查看" color="#8F7A4A" shape="circle" size="small"></uv-button>
				</view>
			</view>
			<view class="menu-item my-40">
				<view class="label"><image class="icon" src="/static/img/dui.png" />在线客服</view>
				<view class="btn">
					<uv-button text="立即咨询" color="#292A43" shape="circle" size="small"></uv-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { useAuthStore } from '@/store/modules/user';

const userStore = useAuthStore();
export default {
	data() {
		return {
			userinfo: {},
		};
	},
	onLoad() {},
	onShow() {
		this.getUserinfo();
	},
	methods: {
		getUserinfo() {
			userStore.getUserinfo().then((userinfo) => {
				this.userinfo = userinfo;
			});
		},
	},
};
</script>

<style lang="scss">
@import 'index.scss';
</style>
